<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.bill_manage" :background="background" :border-bottom="false" title-color="#000000"
			back-icon-color="#000">
			<view class="navright" slot="right">
				<image src="../../../static/images/sx.png" mode="" @click="filters"></image>
			</view>
			</u-navbar>

		<view class="alls">
			<view class="tabs">
				<view class="tab">
					<view :class="ide==0?'tabconted':'tabcont'" @click="changetab(0)">
						<text>{{i18n.bill_manage.daily_bill}}</text>
						<view class="xian"></view>
					</view>
					<view class="borl">
					</view>
					<view :class="ide==1?'tabconted':'tabcont'" @click="changetab(1)">
						<text>{{i18n.bill_manage.monthly_bill}}</text>
						<view class="xian"></view>
					</view>
				</view>
			</view>

			<scroll-view  scroll-y :style="{'height':vHeight + 'px'}" @scrolltolower="reachBottom">
				<view class="day"  v-for="(item, index) in listData" :key="index">
					<view class="day_tit">
						<text class="tit">{{i18n.bill_manage.date}}： </text>
						<text>{{item.dataDate}}</text>
					</view>
					<view class="in_ex">
						<view class="in_exl">
							<view class="inex_tit">
								{{i18n.bill_manage.inandex}}：
							</view>
							<text>{{item.incomeExpenditure}}</text>
						</view>
						<view class="in_exr">
							<view class="inex_tit">
								{{i18n.bill_manage.handling_fee}}：
							</view>
							<text>{{item.handlingFee}}</text>
						</view>
					</view>
					<view class="in_ex">
						<view class="in_exl">
							<view class="inex_tit">
								{{i18n.bill_manage.wholesale_cost}}：
							</view>
							<text>{{item.costAmount}}</text>
						</view>
						<view class="in_exr">
							<view class="inex_tit">
								{{i18n.bill_manage.profits_amount}}：
							</view>
							<text>{{item.profitsAmount}}</text>
						</view>
					</view>
					<view class="allmoney">
						<view class="cost2">
							<view>{{i18n.bill_manage.total_payment}}：</view>
							<text>{{item.orderPayAmount}}</text>
						</view>
						<view class="details" @click="godetails(item)">
							{{i18n.bill_manage.details}}
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="i18n.commission_details.loadText"/>
			</scroll-view>

		</view>
		<u-popup v-model="filter" mode="right" width="590">
			<view class="showright">
				<view class="scree_tit">
					{{i18n.bill_manage.Filter_tit}}
				</view>
				<block v-if="ide==0">
					<view class="smtit">
						{{i18n.bill_manage.Time_selection}}
					</view>
					<view class="timechoose">
						<view :class="index==timer?'perioed':'period'" v-for="(item,index) in i18n.bill_manage.selectime" :key="index"
							@click="choosed(index)">
							{{item}}
						</view>
					</view>
				</block>
				<view class="option_time">
					<view class="time_l">
						<view>
							{{i18n.bill_manage.start_time}}
						</view>
						<image src="../../../static/images/time.png" mode=""></image>
					</view>
					<view class="heng">
		
					</view>
					<view class="time_l">
						<view>
						{{i18n.bill_manage.end_time}}
						</view>
						<image src="../../../static/images/time.png" mode=""></image>
					</view>
				</view>
		
		
				<view class="rightbut">
					<view class="rightconfim" @click="resetForm">
						{{i18n.bill_manage.reset}}
					</view>
					<view class="rightoff" @click="submitForm">
						{{i18n.bill_manage.confirm}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				ide: 0,
				filter:false,
				timer:0,
				dateLimit: '',
				listData: [],
				currentPage: 0,
				totalPage: 0,
				status: 'loadmore',
				vHeight: 450,
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang();
			uni.getSystemInfo({
				success: (res) => {
					this.vHeight = res.windowHeight - 88;
					console.log(res.windowHeight);
				}
			});
			this.getListData();
		},
		methods: {
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			getListData(){
				if(this.ide ==0 ){
					this.getDailyListData();
				}else{
					this.getMonthListData();
				}
			},
			reachBottom() {
				this.getListData();
			},
			resetForm() {
				this.timer = 0;
				this.dateLimit = ""; 
			},
			submitForm(){
				this.filter = false; 
				this.listData = [];
				this.currentPage = 0;
				this.totalPage = 0;
				this.getListData();
			},
			getDailyListData() {
				this.status = 'loading';
				if(this.currentPage>0 && this.totalPage>0 && this.currentPage>=this.totalPage){
					this.status = 'nomore';
					return
				}
				global.$http.request({
					url: '/api/admin/merchant/finance/daily/statement/list',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						page: this.currentPage+1,
						dateLimit:this.dateLimit,
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.listData = this.listData.concat(res.data.data.list);
						this.currentPage = res.data.data.page;
						this.totalPage = res.data.data.totalPage;
						if(this.currentPage>=this.totalPage){
							this.status = 'nomore';
						}else{
							this.status = 'loadmore';
						}
					}
				})
			},
			
			getMonthListData() {
				this.status = 'loading';
				if(this.currentPage>0 && this.totalPage>0 && this.currentPage>=this.totalPage){
					this.status = 'nomore';
					return
				}
				global.$http.request({
					url: '/api/admin/merchant/finance/month/statement/list',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						page: this.currentPage+1,
						dateLimit:this.dateLimit,
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.listData = this.listData.concat(res.data.data.list);
						this.currentPage = res.data.data.page;
						this.totalPage = res.data.data.totalPage;
						if(this.currentPage>=this.totalPage){
							this.status = 'nomore';
						}else{
							this.status = 'loadmore';
						}
					}
				})
			},
			
			changetab(index) {
				this.ide = index
				this.listData = [];
				this.currentPage = 0;
				this.totalPage = 0;
				this.dateLimit = '',
				this.getListData();
			},
			choosed(index) {
				this.timer= index
				//为日账单时，dateLimit可以为"2022-06-05,2022-07-30"
				//为月账单时，dateLimit可以为"2022-06,2022-07"
				switch (index) { 
				  case 0: this.dateLimit = ""; 
				  break; 
				  case 1: this.dateLimit = "today"; 
				  break; 
				  case 2: this.dateLimit = "yesterday"; 
				  break; 
				  case 3: this.dateLimit = "lately7"; 
				  break; 
				  case 4: this.dateLimit = "lately30"; 
				  break; 
				  case 5: this.dateLimit = "month"; 
				  break; 
				  case 6: this.dateLimit = "year"; 
				  break; 
				}
			},
			godetails(billData){
				billData.ide=this.ide;
				uni.setStorageSync('billData', billData);
				uni.navigateTo({
					url:'../bill_details/bill_details'
				})
			},
			filters() {
				this.filter = true
			},
		}
	}
</script>

<style lang="scss">
 
	uni-page-wrapper {
		overflow: hidden;
	}

	page {
		background-color: #f7f7f7;
		padding-bottom: 130rpx;
		overflow: hidden;
		
		.main {
			width: 750rpx;
			height: 100%;
			overflow: hidden;
			.navright {
				padding-right: 30rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
			.alls {
				overflow: hidden;
				
				.tabs {
					width: 750rpx;
					display: flex;
					align-items: center;
					background-color: #fff;
					height: 88rpx;
					
					.tab {
						// width: 249rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.tabcont {
							width: 375rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;
						}

						.tabconted {
							width: 375rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							position: relative;
							color: #FF0000;

							.xian {
								width: 40rpx;
								height: 4rpx;
								background: #FF0000;
								position: absolute;
								top: 57rpx;
							}
						}

						.borl {
							width: 2rpx;
							height: 24rpx;
							background: #CCCCCC;
						}
					}
				}

				.day {
					margin-top: 10rpx;
					background-color: #fff;
					padding: 30rpx 31rpx;
				

					.day_tit {
							padding-bottom: 27rpx;
						.tit {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000000;
						}

						text {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #4D4D4D;
						}
					}

					.in_ex {
						display: flex;
						align-items: center;
						padding-bottom: 27rpx;

						.in_exl {

							width: 400rpx;
							display: flex;
							align-items: center;

							text {
								font-size: 26rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FF0000;
							}
						}

						.in_exr {
							width: 280rpx;
							display: flex;
							align-items: center;

							text {
								font-size: 26rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FF0000;
							}
						}
					}
					
					.cost{
						padding-bottom: 27rpx;
						display: flex;
						align-items: center;
						view{
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000000;
						}
						text{
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FF0000;
						}
					}
					.cost2{
						display: flex;
						align-items: center;
						view{
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000000;
						}
						text{
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FF0000;
						}
					}
					.allmoney{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.details{
							width: 154rpx;
							height: 48rpx;
							text-align: center;
							line-height: 48rpx;
							background: #0F82FF;
							border-radius: 24rpx;
							
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}
						.cost{
							display: flex;
							align-items: center;
							view{
								font-size: 26rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #000000;
							}
							text{
								font-size: 26rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FF0000;
							}
						}
					}
				}






			}
			.showright {
				padding-left: 14rpx;
			
				.scree_tit {
					padding: 78rpx 0 64rpx 0;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			
				.smtit {
					padding-bottom: 23rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			
				.timechoose {
					margin: 20rpx 0;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
			
					text-align: center;
					line-height: 98rpx;
			
					.period {
						padding: 0 20rpx;
						margin-right: 11rpx;
						margin-bottom: 10rpx;
						height: 98rpx;
						background: #F0F0F0;
						border-radius: 10rpx;
						color: #999999;
					}
			
					.perioed {
						padding: 0 20rpx;
						margin-right: 11rpx;
						margin-bottom: 10rpx;
						height: 98rpx;
						background: #304156;
						border-radius: 10rpx;
						color: #FFFFFF;
					}
				}
			
				.option_time {
					display: flex;
					align-items: center;
					// padding: 36rpx 0;
					margin-bottom: 79rpx;
			
					.time_l {
						width: 244rpx;
						height: 98rpx;
						background: #F0F0F0;
						border-radius: 10rpx;
						line-height: 98rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
			
						view {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #B3B3B3;
							padding-left: 11rpx;
						}
			
						image {
							width: 61rpx;
							height: 96rpx;
						}
					}
			
					.heng {
						margin: 0 9rpx;
						width: 32rpx;
						height: 2rpx;
						background: #333333;
					}
				}
			
			
			
			
				.rightbut {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 34rpx;
					font-family: PingFang SC;
					line-height: 92rpx;
					text-align: center;
					padding: 0 25rpx;
			
					.rightconfim {
						width: 240rpx;
						height: 92rpx;
						border: 2rpx solid #999999;
						border-radius: 46rpx;
						font-weight: 400;
						color: #999999;
					}
			
					.rightoff {
						width: 240rpx;
						height: 92rpx;
						background: #304156;
						border-radius: 46rpx;
			
						color: #FFFFFF;
			
					}
				}
			}
		}
	}
</style>
